﻿<!DOCTYPE html>
<html ng-app="directiveApp">
<head>
    <title></title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <script src="scripts/angular.min.js"></script>
    <script type="text/javascript">
        angular.module("directiveApp", [])
            .directive("scopeDemo", function () {
                return {
                    template:
                    "<div class='panel-body'>Name: <input ng-model=name /></div>",
                }
            })
            .controller("scopeCtrl", function ($scope) {
                // 此处未显式定义任何scope数据
                // 但是因为directive模板中ng-model的存在，将会导致隐式定义$scope.name
            });
    </script>
</head>
<body>
    <div ng-controller="scopeCtrl" class="panel panel-default">
        <!--
            两个scope-demo directive都放在scopeCtrl中，它们默认情况下共享scopeCtrl的scope；
            修改一个编辑框中的数据，另一个编辑框也会同步修改
        -->
        <div class="panel-body" scope-demo></div>
        <div class="panel-body" scope-demo></div>
    </div>
</body>
</html>
